﻿@{
    Layout = "_ComplexTable";
}

@section headers{
    <environment names="Development">
        <link href="/lib/wdtree/tree.css" rel="stylesheet" asp-append-version="true" />
    </environment>
    <environment names="Staging,Production">
        <link href="/lib/wdtree/tree.min.css" rel="stylesheet" asp-append-version="true" />
    </environment>
    <style type="text/css">
        .fixed-table-toolbar {
            padding: 0 15px;
        }

        .fixed-table-body {
            border-top: solid 1px #ddd;
        }
    </style>
}

<div class="ui-layout ui-layout-container">
    <div class="ui-layout-west" style="width:200px;float:left;">
        <div class="west-Panel">
            <div class="panel-Title">功能目录</div>
            <div id="itemTree"></div>
        </div>
    </div>

    <div class="ui-layout-center" style="width:calc(100% - 208px);float:right;">
        <div class="center-Panel">
            <div class="panel-Title">功能信息</div>

            <div class="titlePanel">
                <div id="toolbar">
                    <div class="form-inline" role="form">
                        <input type="hidden" id="ParentId" name="ParentId" value="0" />
                        <div class="form-group">
                            <span>名称: </span>
                            <input name="FullName" class="form-control w70" type="text" placeholder="名称" />
                        </div>
                        <button id="btnSearch" type="submit" class="btn btn-default">搜索</button>
                    </div>
                </div>
            </div>

            <div class="gridPanel">
                <table id="table"
                       data-classes="table table-no-bordered"
                       data-toggle="table"
                       data-toolbar="#toolbar"
                       data-show-refresh="true"
                       data-show-columns="true"
                       data-show-toggle="true"
                       data-query-params="queryParams"
                       data-url="/Module/Index"
                       data-side-pagination="server"
                       data-pagination="false">
                    <thead>
                        <tr>
                            <th data-field="fullName">名称</th>
                            <th data-field="urlAddress">连接</th>
                            <th data-field="target">目标</th>
                            <th data-field="icon" data-formatter="iconFormatter">图标</th>
                            <th data-field="isMenu" data-formatter="chkFormatter">菜单</th>
                            <th data-field="isExpand" data-formatter="chkFormatter">展开</th>
                            <th data-field="isPublic" data-formatter="chkFormatter">公共</th>
                            <th data-field="isEnabled" data-formatter="chkFormatter">有效</th>
                            <th data-field="description">备注</th>
                            <th data-formatter="optFormatter" data-width="120px">操作</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/lib/wdtree/tree.min.js"></script>
    <script type="text/javascript">
    $(function () {
        $('#btnSearch').click(function () { $('#table').bootstrapTable('refresh'); });

        var w = $(window).width() - 30 - 200 - 8;
        $('.west-Panel,.center-Panel').height(top.App.getIframeLayoutHeight() - 35);

        $('<button class="btn btn-default" onclick="funAdd()" type="button" name="Add" title="添加"><i class="glyphicon glyphicon-plus-sign"></i></button>').insertAfter("button[name='refresh']");

        loadTree();
    });
    //搜索
    function queryParams(params) {
        $('#toolbar').find('input[name]').each(function () {
            params[$(this).attr('name')] = $(this).val();
        });
        return params;
    }
    //操作
    function optFormatter(value, row, index) {
        return [
            '<a class="detail" href="javascript:funDetail(\'' + row.id + '\')" title="查看">',
            '<i class="fa fa-search-plus"></i>',
            '</a>  ',
            '<span class="btn_split"></span>',
            '<a class="edit" href="javascript:funBtns(\'' + row.id + '\')" title="按钮管理">',
            '<i class="fa fa-gavel"></i>',
            '</a>  ',
            '<span class="btn_split"></span>',
            '<a class="edit" href="javascript:funEdit(\'' + row.id + '\')" title="编辑">',
            '<i class="glyphicon glyphicon-edit"></i>',
            '</a>  ',
            '<span class="btn_split"></span>',
            '<a class="remove" href="javascript:funDel(\'' + row.id + '\')" title="删除">',
            '<i class="glyphicon glyphicon-remove"></i>',
            '</a>'
        ].join('');
    }

    function iconFormatter(value, row, index) {
        if (value == undefined || undefined == '')
            return '-';
        else
            return '<i class="' + value + '"></i>';
    }
    //
    function chkFormatter(value, row, index) {
        if (value == false)
            return '<i class="fa fa-toggle-off text-muted"></i>';
        else
            return '<i class="fa fa-toggle-on text-aqua"></i>';
    }

    //查看
    var funDetail = function (id) {
        $.fn.modalOpen({
            id: "moduleDetail",
            title: '查看',
            url: '/Module/Details/'+id,
            width: "700px",
            height: "400px",
            btn: null
        });
    };
    //添加
    var funAdd = function () {
        $.fn.modalOpen({
            id: "moduleCreate",
            title: '添加模块',
            url: '/Module/Create',
            width: "700px",
            height: "400px",
            callBack: function (iframeId) {
                top.frames[iframeId].submitForm();
            }
        });
    };
    //编辑
    var funEdit = function (id) {
        $.fn.modalOpen({
            id: "moduleEdit",
            title: '编辑模块',
            url: '/Module/Edit?Id=' + id,
            width: "700px",
            height: "400px",
            callBack: function (iframeId) {
                top.frames[iframeId].submitForm();
            }
        });
    }
    //删除
    var funDel = function (id) {
        $.fn.deleteForm({
            prompt: "注：您确定要删除该项数据吗？",
            url: "/Module/Delete",
            param: {Id:id},
            loading: "正在删除数据...",
            success: function (iframeId) {
                $('#table').bootstrapTable('refresh');
            }
        });
    }
    //按钮管理
    var funBtns=function(id){
        $.fn.modalOpen({
            id: "moduleBtns",
            title: '按钮管理',
            url: '/ModuleButton/Index?ModuleId=' + id,
            width: "900px",
            height: "400px",
            btn:null
        });
    }
    var loadTree = function () {
        var item = {
           // height: top.App.getIframeLayoutHeight()-35,
            data:@Html.Raw(ViewData["tree"]),
            onnodeclick: function (item) {
                $("#ParentId").val(item.id);
                $('#btnSearch').trigger("click");
            }
        };
        //初始化
        $("#itemTree").treeview(item);
    };
    </script>
}